<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>关键词创作</text>
		</view>
		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> Ai标题</text>
		</view>


		<view class="taskStatistics flex-between">
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.allCount}}
				</view>
				<view class="margin-top_16rpx">
					任务数量
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.todayCount}}
				</view>
				<view class="" class="margin-top_16rpx ">
					今日任务
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.yesterdayCount}}
				</view>
				<view class="" class="margin-top_16rpx">
					昨日任务
				</view>
			</view>
			<view class="flex-column">
				<view class="" style="color: #0184F0;font-weight: bold;font-size: 32rpx;">
					{{creationStatis.subCount}}
				</view>
				<view class="" class="margin-top_16rpx">
					标题条数
				</view>
			</view>
		</view>

		<view class="v-title flex-align-center">
			<text></text>
			<view>标题列表</view>
		</view>

		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">

			<view class="collectionList" v-for="(item,index) in aicreateList" :key="index">
				<view class="">
					<view class="">
						<view class="font-weight_bold">
							{{item.name}}
						</view>

					</view>

					<view class="flex-start-center margin-top_30rpx padding-bottom_30rpx border-bottom-ECECEC">
						<view class="" style="color: #0E95F9;font-size: 26rpx;">
							标题数量：{{item.rows}}
						</view>
						<view class="margin_0_20rpx" style="color: #ECECEC;">
							|
						</view>
						<view class="" style="color: #999999;font-size: 26rpx;">
							创建时间：{{item.create_time}}
						</view>
						<!-- <view class="flex-start-center">
						<view class="flex">
							<text style="color: #FF3A3A;">列表</text>
							<image class="icon" src="/static/two/组合 3183.png" mode=""></image>
						</view>
						<view class="flex margin-left_20rpx">
							<text style="color: #0184F0;">编辑</text>
							<image class="icon" src="/static/two/组合 3182.png" mode=""></image>
						</view>
					</view> -->
					</view>
				</view>
				<view class="flex-between">
					<view class="flex listEdit" @click="viewTitle(item)">
						<uni-icons type="eye" color="#0184F0" size="24"></uni-icons>

						<text style="color: #0184F0;margin-left: 8rpx;">查看标题</text>

					</view>
					<view class="margin_0_20rpx" style="color: #ECECEC;">
						|
					</view>
					<view class="flex listEdit" @click="delFn(item)">


						<uni-icons type="trash-filled" color="#FF0000" size="24"></uni-icons>
						<text style="color: #FF0000;">删除</text>

					</view>

				</view>

			</view>
		</mescroll-body>
		
		<view class="height50">
			
		</view>


		<custom-tab-bar :items="tabItems" :currentIndex="currentTab" @item-click="onTabClick" :color="color"
			:selectedColor="selectedColor"></custom-tab-bar>







	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import {
		tabbar,
		tabbar4
	} from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {

				navTop: '',
				materialBg: this.$imgs.violet,
				currentTab: 2, // 当前选中的tab索引
				tabItems: tabbar4.tabItems,
				color: tabbar4.color,
				selectedColor: tabbar4.selectedColor,
				creationStatis: {},
				aicreateList: [],
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: ""

			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.creationStatisFn()
			this.createdgetSystemInfo()




		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},

		computed: {


		},
		methods: {
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			viewTitle(item) {
				this.$sun.navGo('/pagesA/creatCenter/aITitle/aiTitleList', {
					info: JSON.stringify({
						id: item.id
					})
				})
			},
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.aicreatePage,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						page: scroll.num,
						psize: 10,




					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.aicreateList = [];
					this.aicreateList = this.aicreateList.concat(result.data.list);

					console.log(this.aicreateList)

				}
			},
			async creationStatisFn() {
				const result = await this.$http.get({
					url: this.$api.creationStatis,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 1

					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					this.creationStatis = result.data

				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			navBack() {
				this.$sun.navBack()
			},
			delFn(item) {



				uni.showModal({
					title: '是否确定要删除',
					content: '是否要删除，' + item.name + '如果删除，将不可恢复，请您谨慎选择',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.get({
								url: this.$api.aicreateDel,
								data: {
									uid: uni.getStorageSync('uid'),
									aicreate_id: item.id

								}
							});
							if (result.errno == 0) {
								this.$sun.toast(result.message, 'none')

								this.$nextTick(() => {
									this.mescroll?.resetUpScroll();
								})
									this.creationStatisFn()

							} else {
								this.$sun.toast(result.message, 'none')
							}

						} else if (res.cancel) {

						}
					}
				});
			},

			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
				console.log(index, this.tabItems)
				//this.currentTab = index;
				if (index != this.currentTab) {
					if (index == 0) {
						uni.switchTab({
							url: this.tabItems[index].pagePath
						})
					} else {
						uni.navigateTo({
							url: this.tabItems[index].pagePath
						})
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.collectionList {
			margin-top: 20rpx;
			width: 709.7rpx;
			// height: 163.68rpx;
			padding: 20rpx 20rpx 0 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.listEdit {
				width: 50%;
				height: 100rpx;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin: 0 5rpx;
				margin-bottom: 5rpx;
			}

		}


		.taskStatistics {
			margin-top: 40rpx;
			width: 709rpx;
			height: 154.88rpx;
			padding: 30rpx;

			border-radius: 20rpx;

			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(1, 132, 240, 0.05);
			background: rgb(255, 255, 255);
		}

		.v-title {
			margin-top: 40rpx;
			// padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #7266FF;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

	}
</style>